<template>
    <div class="app-container">
      <el-form
        :model="searchList"
        ref="queryForm"
        :inline="true"
        label-width="85px"
      >
        <el-form-item label="业务线" prop="bizCode">
          <el-select
            v-model="searchList.bizCode"
            style="width: 200px"
            placeholder="请先选择业务线"
            clearable
            filterable
            size="small"
            @keyup.enter.native="handleQuery"
          >
            <el-option
              :label="dict.dictLabel"
              :value="dict.dictValue"
              v-for="dict in bizDisplayOptions"
              :key="dict.dictLabel"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="任务名称" prop="taskType">
          <el-select
            v-model="searchList.taskType"
            style="width: 200px"
            placeholder="请先选择任务名称"
            clearable
            filterable
            size="small"
            @keyup.enter.native="handleQuery"
          >
            <el-option
              :label="dict.dictLabel"
              :value="dict.dictValue"
              v-for="dict in tableTypeOptions"
              :key="dict.dictLabel"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="searchList.status"
            style="width: 200px"
            placeholder="请先选择状态"
            clearable
            filterable
            size="small"
            @keyup.enter.native="handleQuery"
          >
            <el-option
              :label="dict.dictLabel"
              :value="dict.dictValue"
              v-for="dict in downloadStatuesOptions"
              :key="dict.dictLabel"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="info"
            plain
            icon="el-icon-upload2"
            size="mini"
            v-hasPermi="['sysDynamicTableConfig:sysDynamicTableConfig:import']"
            @click="handleNewImportOrder"
            >导入</el-button
          >
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @handleQuery="handleQuery"
          @resetQuery="reset"
        ></right-toolbar>
      </el-row>
  
      <el-table
        v-loading="loading"
        :data="downloadList"
        v-adaptive="{ bottomOffset: 50 }"
        height="100px"
      >
        <el-table-column
          min-width="110"
          type="index"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column label="业务线" min-width="80" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.bizCode }} </span>
          </template>
        </el-table-column>
        <el-table-column label="任务名称" min-width="80" align="center">
          <template slot-scope="scope">
            <span>{{ statue(scope.row.taskType,tableTypeOptions) }} </span>
          </template>
        </el-table-column>
        <el-table-column label="文件名称" min-width="200" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.fileName.split(/[.]/)[0] }} </span>
          </template>
        </el-table-column>
        <el-table-column label="文件格式" min-width="80" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.fileName.split(/[.]/)[1]}} </span>
          </template>
        </el-table-column>
        <el-table-column label="开始执行时间" min-width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.startTime }} </span>
          </template>
        </el-table-column>
        <el-table-column label="完结时间" min-width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.finishTime }} </span>
          </template>
        </el-table-column>
        <el-table-column label="进度" min-width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.totalPage?((scope.row.currentPage /scope.row.totalPage)*100).toFixed(2)+'%' :'0%'}} </span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          min-width="110"
          align="center"
          key="status"
        >
          <template slot-scope="scope">
            <span>{{  statue(scope.row.status, downloadStatuesOptions) }} </span>
          </template>
        </el-table-column>
  
        <el-table-column
          label="操作"
          width="110"
          align="center"
          fixed="right"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleDetail(scope.row)"
              v-hasPermi="['bac:sysImportCenter:query']"
              style="margin-right: 5px"
            >
              详情</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="retry(scope.row)"
              v-hasPermi="['bac:sysImportCenter:retry']"
              v-if="scope.row.retryFlag==1"
            >
              重试</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchList.pageNum"
        :limit.sync="searchList.pageSize"
        @pagination="getList"
      />
    </div>
  </template>
  
  <script>
  import { sysImportCenter,retry } from "@/api/common/imoprtCenter.js";
  export default {
    name: "ImoprtCenter",
    data() {
      return {
        searchList: {
          pageNum: 1,
          pageSize: 10,
        },
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 列表数据
        downloadList: [],
        // 业务线字典
        bizDisplayOptions: [],
        // 下载状态字典
        downloadStatuesOptions: [],
        tableTypeOptions: [],
      };
    },
    async created() {
      let resArr = await Promise.all([
        // 获取业务线字典
        this.getDicts("BAC_BIZ_DISPLAY"),
        // 获取导入状态字典
        this.getDicts("sys_Import_Center_Status"),
        // 获取任务模式字典
        this.getDicts("sys_dynamic_table_type"),
      ]);
      this.bizDisplayOptions = resArr[0].data;
      this.downloadStatuesOptions = resArr[1].data;
      this.tableTypeOptions = resArr[2].data;
      this.getList();
    },
    methods: {
      // 获取列表
      getList() {
        this.loading = true;
        sysImportCenter(this.searchList).then((res) => {
          this.downloadList = res.data;
          this.total = res.total;
          this.loading = false;
        });
      },
      handleDetail(row){
        this.$router.push("/common/imoprtCenterDetails/" + row.id);
      },
      // 新导入
    handleNewImportOrder() {
      this.$router.push("/common/imoprtCenterAddImport");
    },
      // 下载
      retry(row) {
        this.$confirm(
          "是否确认重试文件名称为 “" + row.fileName + "” 的数据项？",
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          retry(row.id).then((res) => {
            this.getList();
            this.msgSuccess("操作成功");
          });
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.searchList.pageNum = 1;
        this.getList();
      },
      // 重置
      reset() {
        this.searchList = {
          pageNum: 1,
          pageSize: 10,
        };
        this.getList();
      },
    },
  };
  </script>
  
  <style lang="scss" scoped></style>
  